<template>
	<view class="DetailsSubstitute">
		<!-- 骨架 -->
		<view class="skeleton-style" v-if="loading">
			<u-skeleton :title="false" rowsWidth="718rpx" :rowsHeight="['466rpx','158rpx','92rpx','270rpx','270rpx','392rpx']" rows="8"
				:loading="loading"></u-skeleton>
		</view>
		<!-- 订单信息 -->
		<view class="f-background radius12 margin-bottom-16" v-if="!loading">
			<OrderModule viewImage :index="0" :item="infoData.pickOrderInfoList" />
		</view>
		<!-- 流程部分 -->
		<view class="process-section f-background radius12 margin-bottom-16 dis-cen">
			<view class="section text-align por" v-for="(item,index) in flowPath" :key="index">
				<view class="points margin-bottom-16 radius100" :class="{'background': item.item}"></view>
				<view class="font-weight-400 size-28 color9" :class="{'color3':item.item}">{{item.title}}</view>
				<view class="font-weight-400 size-22 color-8" :class="{'opacity0':!item.item}">{{item.item}}</view>
				<view class="strip poa" :class="{'background': item.item}" v-if="index != flowPath.length-1">
				</view>
			</view>
		</view>
		<!-- 跑腿收入 -->
		<view class="income f-background radius12 margin-bottom-16" v-if="!options.type*1">
			<text class="font-weight-400 color3 size-28">本单我的跑腿收入：</text>
			<text class="price-font color font-weight-500 size-32">¥{{infoData.pickOrderInfoList.amount}}</text>
		</view>
		<!-- 取件图片 -->
		<view class="pick-picture f-background radius12 padding-left-24 margin-bottom-16"
			v-if="infoData.deliveryOrder.takeUrl">
			<view class="padding28 font-weight-500 color3 size-28">取件图片</view>
			<view class="picture-info">
				<view class="info-img" v-for="(item,index) in infoData.takeUrlImg" :key="item"
					@click="onPreviewImage(infoData.takeUrlImg,index)">
					<image class="width-height100 f5-background radius12" :src="item" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 送达图片 -->
		<view class="pick-picture f-background radius12 padding-left-24 margin-bottom-16"
			v-if="infoData.deliveryOrder.serviceUrl">
			<view class="padding28 font-weight-500 color3 size-28">送达图片</view>
			<view class="picture-info">
				<view class="info-img" v-for="(item,index) in infoData.serviceUrlImg" :key="item"
					@click="onPreviewImage(infoData.serviceUrlImg,index)">
					<image class="width-height100 f5-background radius12" :src="item" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="ordering-info f-background radius12 padding-left-24 margin-bottom-16">
			<view class="dis-ali" @click="onCopy(infoData.deliveryOrder.orderId)">
				<view class="info-width font-weight-400 color9 size-24">订单编号</view>
				<view class="font-weight-400 color3 size-24 dis-ali">
					<text>{{infoData.deliveryOrder.orderId}}</text>
					<view class="copy font-weight-400 size-24 radius100">复制</view>
				</view>
			</view>
			<view class="dis-ali" v-if="infoData.deliveryOrder.createTime">
				<view class="info-width font-weight-400 color9 size-24">提交时间</view>
				<view class="font-weight-400 color3 size-24">{{infoData.deliveryOrder.createTime}}</view>
			</view>
<!-- 			<view class="dis-ali" v-if="infoData.pickOrderInfoList.payTime">
				<view class="info-width font-weight-400 color9 size-24">支付时间</view>
				<view class="font-weight-400 color3 size-24">{{infoData.pickOrderInfoList.payTime}}</view>
			</view>
			<view class="dis-ali">
				<view class="info-width font-weight-400 color9 size-24">支付方式</view>
				<view class="font-weight-400 color3 size-24">便利豆抵扣</view>
			</view> -->
		</view>
		<view class="inset-bottom"></view>
		<!-- 底部操作 -->
		<view class="operate poflb width100 f-background" v-if="!options.type*1">
			<OperatingButton :phone="infoData.pickOrderInfoList.telephone" :item="infoData.deliveryOrder" :typeOper="1"
				:addIndex="infoData.closing" @operate="onOperate" />
			<view class="inset-bottom"></view>
		</view>
		<u-popup :show="phoShow" mode="bottom" round="32" @close="phoShow=false">
			<UploadSubmit :item="infoData.pickOrderInfoList" :deliveryStatus="infoData.pickOrderInfoList.orderStatus"
				@savePicture="onSavePicture" />
		</u-popup>
	</view>
</template>

<script>
	import UploadSubmit from '@/components/operating-button/upload-submit'
	import { OnlineStatic, ExpressOrderDetail } from "@/api/index"
	import { settings } from "@/utils/public"
	import OrderModule from '@/components/order-module/order-module'
	import OperatingButton from '@/components/operating-button/operating-button'
	export default {
		components: {
			OrderModule,
			OperatingButton,
			UploadSubmit
		},
		data() {
			return {
				phoShow: false,
				id: 0, // 订单id
				flowIndex: 0, // 0=未接单、1=已接单/待取货、2=取货中、3=已送达
				flowPath: [
					{ title: '接单', item: '', name: 'acceptanceTime' },
					{ title: '取货', item: '', name: 'pickupTime' },
					{ title: '送达', item: '', name: 'deliveryTime' }
				],
				infoData: {},
				settings,
				selectData: {},
				loading: true,
				OnlineStatic,
				options: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			// console.log('options',options.type)
			this.options = options
			this.postExpressOrderDetail()
		},
		methods: {
			// 获取快递详情
			async postExpressOrderDetail() {
				const { data, code } = await ExpressOrderDetail({ orderNo: this.id })
				if (code == "200") {
					this.loading = false
					this.flowPath.map(res => {
						res.item = data.deliveryOrder[res.name] || 0
					})
					data.takeUrlImg = data.deliveryOrder.takeUrl.split(',')
					data.serviceUrlImg = data.deliveryOrder.serviceUrl.split(',')
					console.log(data)
					this.infoData = data
				}
			},
			onSavePicture() {
				this.phoShow = false
				this.postExpressOrderDetail()
			},
			onJumpPage() {
				uni.navigateTo({
					url: "/packagePayment/payment/payment"
				});
			},
			// 按钮点击
			onOperate({  item, type }) {
				this.selectData = item
				if ([2, 3].includes(type)) this.phoShow = true
				else this.postExpressOrderDetail()
			},
			// 打电话
			onPhone() {
				uni.makePhoneCall({
					phoneNumber: '1234567890', // 替换为实际要拨打的电话号码  
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.error('拨打电话失败');
					}
				});
			},
			// 复制
			onCopy(orderId) {
				uni.setClipboardData({
					data: orderId + "",
					success: function() {
						console.log('success');
						uni.$u.toast('复制成功')
					}
				})
			},

			// 查看大图
			onPreviewImage(list, index) {
				if(this.infoData.pickOrderInfoList.orderStatus == 3) return
				uni.previewImage({
					current: index * 1,
					urls: list
				});
			},
		}
	}
</script>

<style lang="scss">
	.DetailsSubstitute {
		padding: 16rpx 16rpx 130rpx;

		// 流程部分
		.process-section {
			padding: 40rpx 12rpx 16rpx;

			.section {
				width: 134rpx;

				.opacity0 {
					opacity: 0;
				}

				.strip {
					width: 220%;
					height: 1px;
					background: #D6D6D6;
					top: 18rpx;
					left: 50%;
				}

				.points {
					position: relative;
					z-index: 10;
					width: 16rpx;
					height: 16rpx;
					background: #D6D6D6;
					border: 10rpx solid #ffffff;
					margin: 0 auto;
				}
			}
		}

		// 跑腿收入
		.income {
			padding: 28rpx 28rpx 30rpx;
		}

		// 取件图片
		.pick-picture {
			.padding28 {
				padding: 28rpx 0;
			}

			.picture-info {
				// padding-top: 8rpx;
				display: grid;
				grid-template-columns: repeat(4, 152rpx);
				grid-row-gap: 20rpx;
				grid-column-gap: 20rpx;
				padding-bottom: 28rpx;
				// flex-wrap: wrap;

				.info-img {
					width: 152rpx;
					height: 152rpx;
					margin-right: 20rpx;
					// padding-bottom: 22rpx;
				}
			}
		}

		// 订单信息
		.ordering-info {
			display: grid;
			grid-row-gap: 24rpx;
			padding: 30rpx 28rpx 26rpx;

			.info-width {
				width: 156rpx;
			}

			.copy {
				margin-left: 24rpx;
				padding: 2rpx 12rpx;
				background: #FFF0F0;
				color: #EE4747;
			}
		}

		// 底部操作
		.operate {
			z-index: 100;

			.operate-dis {
				padding: 16rpx;
			}
		}
	}
</style>